<template>
  <div class="writer-page">
    <div class="container">
      <!-- 顶部Banner -->
      <div class="writer-banner">
        <div class="banner-content text-center">
          <h1 class="banner-title">怪谈作家专区</h1>
          <p class="banner-desc mt-2">加入怪谈作家平台，实现你的写作梦想</p>
          <el-button type="primary" size="medium" class="mt-3" @click="handleApplyWriter">申请成为作家</el-button>
        </div>
      </div>

      <!-- 作家中心入口 -->
      <div class="feature-sections mt-5">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(feature, index) in writerFeatures" :key="index">
            <div class="feature-section" @click="navigateTo(feature.route)">
              <div class="feature-content">
                <div class="feature-title">
                  <i :class="feature.icon"></i> {{ feature.title }}
                </div>
                <div class="feature-desc">{{ feature.desc }}</div>
              </div>
              <div class="feature-arrow">
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 作家福利 -->
      <div class="benefits-section mt-5">
        <div class="section-header mb-4">
          <h2 class="section-title">
            <span class="title-icon">🏆</span>
            作家福利
          </h2>
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(benefit, index) in benefits" :key="index">
            <div class="benefit-card card text-center">
              <div class="benefit-icon">
                <i :class="benefit.icon"></i>
              </div>
              <h3 class="benefit-title mt-3">{{ benefit.title }}</h3>
              <p class="benefit-desc mt-2">{{ benefit.description }}</p>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 创作流程 -->
      <div class="process-section mt-5">
        <div class="section-header mb-4">
          <h2 class="section-title">
            <span class="title-icon">📝</span>
            创作流程
          </h2>
        </div>
        <div class="process-steps">
          <el-steps :active="4" finish-status="success" align-center>
            <el-step title="注册账号" description="创建您的番茄小说账号"></el-step>
            <el-step title="申请成为作家" description="填写作家申请表单"></el-step>
            <el-step title="创建作品" description="开始您的创作之旅"></el-step>
            <el-step title="获得收益" description="您的作品获得读者喜爱并带来收益"></el-step>
          </el-steps>
        </div>
      </div>

      <!-- 作家排行榜和最新公告 -->
      <div class="rank-news-container mt-5">
        <div class="rank-news-wrapper">
          <!-- 左侧：作家排行榜 -->
          <div class="rank-section">
            <div class="section-header">
              <h2 class="section-title">
                <span class="title-icon">🌾</span>
                作家荣誉榜
                <span class="title-icon">🌾</span>
              </h2>
            </div>
            <div class="rank-desc">根据作品发布、好评、收入等综合得分排行</div>
            <div class="rank-list">
              <div v-for="(writer, index) in topWriters" :key="index" class="rank-item">
                <div class="rank-number">{{ index + 1 }}</div>
                <div class="writer-avatar" :style="{ background: writer.avatarBg }"></div>
                <div class="rank-writer-info">
                  <div class="rank-writer-name">{{ writer.name }}</div>
                  <div class="rank-writer-works">代表作：{{ writer.works }}</div>
                  <div class="rank-writer-achievement">{{ writer.achievement }}</div>
                </div>
              </div>
            </div>
            <div class="rank-controls">
              <span class="rank-control active"></span>
              <span class="rank-control"></span>
              <span class="rank-control"></span>
            </div>
          </div>

          <!-- 右侧：最新公告 -->
          <div class="news-section">
            <div class="section-header">
              <h2 class="section-title">
                <span class="title-icon">📢</span>
                平台公告
              </h2>
              <a href="#" class="more-link">更多 <i class="el-icon-arrow-right"></i></a>
            </div>
            <div class="news-list">
              <div v-for="(news, index) in writerNews" :key="index" class="news-item">
                <span class="news-title">{{ news.title }}</span>
                <span class="news-date">{{ news.date }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 作家活动 -->
      <div class="activities-section mt-5">
        <div class="section-header mb-4">
          <h2 class="section-title">
            <span class="title-icon">🎉</span>
            作家活动
          </h2>
          <router-link to="/writer/activities" class="more-link">更多 <i class="el-icon-arrow-right"></i></router-link>
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(activity, index) in activities" :key="index">
            <div class="activity-card card">
              <div class="activity-cover">
                <div class="activity-status" :class="activity.status === '进行中' ? 'active' : ''">{{ activity.status }}</div>
                <div class="activity-cover-placeholder" :style="{ background: activity.coverBg }"></div>
              </div>
              <div class="activity-info mt-3">
                <h3 class="activity-title text-ellipsis">{{ activity.title }}</h3>
                <p class="activity-time text-secondary mt-2">{{ activity.time }}</p>
                <p class="activity-desc multi-ellipsis-2 mt-2">{{ activity.description }}</p>
                <div class="activity-btn mt-3">
                  <el-button type="primary" plain size="small">查看详情</el-button>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 创作技巧分享 -->
      <div class="writing-tips-section mt-5">
        <div class="section-header mb-4">
          <h2 class="section-title">
            <span class="title-icon">💡</span>
            创作技巧
          </h2>
          <router-link to="/writer/tips" class="more-link">更多 <i class="el-icon-arrow-right"></i></router-link>
        </div>
        <el-tabs v-model="activeTipTab" type="card">
          <el-tab-pane label="人物塑造" name="character">
            <div class="tips-content">
              <div class="tip-item" v-for="(tip, index) in characterTips" :key="index">
                <div class="tip-title">{{ tip.title }}</div>
                <div class="tip-desc">{{ tip.description }}</div>
                <el-button type="text" size="small">阅读全文</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="情节设计" name="plot">
            <div class="tips-content">
              <div class="tip-item" v-for="(tip, index) in plotTips" :key="index">
                <div class="tip-title">{{ tip.title }}</div>
                <div class="tip-desc">{{ tip.description }}</div>
                <el-button type="text" size="small">阅读全文</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="场景描写" name="scene">
            <div class="tips-content">
              <div class="tip-item" v-for="(tip, index) in sceneTips" :key="index">
                <div class="tip-title">{{ tip.title }}</div>
                <div class="tip-desc">{{ tip.description }}</div>
                <el-button type="text" size="small">阅读全文</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 成功作家故事 -->
      <div class="success-stories-section mt-5 mb-5">
        <div class="section-header mb-4">
          <h2 class="section-title">
            <span class="title-icon">🌟</span>
            成功作家故事
          </h2>
          <router-link to="/writer/stories" class="more-link">更多 <i class="el-icon-arrow-right"></i></router-link>
        </div>
        <el-carousel :interval="4000" type="card" height="320px">
          <el-carousel-item v-for="(story, index) in successStories" :key="index">
            <div class="story-card">
              <div class="story-header flex items-center">
                <div class="author-avatar" :style="{ background: story.avatarBg }"></div>
                <div class="author-info ml-3">
                  <div class="author-name">{{ story.author }}</div>
                  <div class="author-works text-secondary mt-1">{{ story.works }}</div>
                </div>
              </div>
              <div class="story-content mt-3">
                <p class="story-quote">{{ story.quote }}</p>
                <p class="story-description mt-3">{{ story.description }}</p>
              </div>
              <div class="story-footer mt-3">
                <el-button type="text">阅读完整故事</el-button>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 作家申请对话框 -->
      <el-dialog title="申请成为作家" :visible.sync="writerApplyDialogVisible" width="500px">
        <el-form :model="writerApplyForm" label-width="100px">
          <el-form-item label="真实姓名">
            <el-input v-model="writerApplyForm.realName"></el-input>
          </el-form-item>
          <el-form-item label="笔名">
            <el-input v-model="writerApplyForm.penName"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="writerApplyForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="writerApplyForm.email"></el-input>
          </el-form-item>
          <el-form-item label="创作方向">
            <el-select v-model="writerApplyForm.category" placeholder="请选择创作方向" style="width: 100%">
              <el-option v-for="category in categories" :key="category.id" :label="category.name" :value="category.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创作经历">
            <el-input type="textarea" v-model="writerApplyForm.experience" rows="4"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="writerApplyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitWriterApply">提交申请</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'WriterPage',
  data() {
    return {
      writerApplyDialogVisible: false,
      writerApplyForm: {
        realName: '',
        penName: '',
        phone: '',
        email: '',
        category: '',
        experience: ''
      },
      activeTipTab: 'character',
      writerFeatures: [
        {
          icon: 'el-icon-edit-outline',
          title: '创作中心',
          desc: '开始创作、管理作品、查看作品数据',
          route: '/writer/create'
        },
        {
          icon: 'el-icon-pie-chart',
          title: '收益中心',
          desc: '查看收益明细、结算记录、提现管理',
          route: '/writer/income'
        },
        {
          icon: 'el-icon-trophy',
          title: '福利中心',
          desc: '作家福利申请、版权合作、推广资源',
          route: '/writer/welfare'
        }
      ],
      benefits: [
        {
          icon: 'el-icon-money',
          title: '丰厚收益',
          description: '作品获得平台推荐，获取更多曝光和收益'
        },
        {
          icon: 'el-icon-data-line',
          title: '数据分析',
          description: '专业数据分析工具，了解读者喜好和阅读习惯'
        },
        {
          icon: 'el-icon-medal',
          title: '荣誉体系',
          description: '完善的作家荣誉体系，获得更多社会认可'
        }
      ],
      topWriters: [
        {
          name: '风中龙吟',
          works: '《九天神帝》',
          achievement: '月收入10万+，作品累计5亿阅读',
          avatarBg: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)'
        },
        {
          name: '月下清风',
          works: '《重生之豪门千金》',
          achievement: '月收入8万+，签约影视改编',
          avatarBg: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)'
        },
        {
          name: '幻想曲',
          works: '《末日求生指南》',
          achievement: '月收入6万+，累计粉丝200万',
          avatarBg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
        },
        {
          name: '星光璀璨',
          works: '《我在玄幻世界开挂》',
          achievement: '月收入5万+，连续3个月榜首',
          avatarBg: 'linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%)'
        },
        {
          name: '都市日常',
          works: '《我的老板是女帝》',
          achievement: '月收入4万+，电子书销量第一',
          avatarBg: 'linear-gradient(135deg, #ffedbc 0%, #ed4264 100%)'
        }
      ],
      writerNews: [
        { title: '2025年春季作家扶持计划公告', date: '03-15' },
        { title: '关于调整作家稿酬结算周期的通知', date: '03-10' },
        { title: '番茄小说平台版权合作项目征集', date: '03-05' },
        { title: '2025年Q1作家福利发放通知', date: '02-28' },
        { title: '番茄小说平台作品推荐规则更新', date: '02-22' },
        { title: '关于加强原创内容保护的公告', date: '02-18' }
      ],
      activities: [
        {
          title: '2025年春季新书扶持计划',
          time: '2025-03-01 至 2025-05-31',
          description: '参与春季新书扶持计划，有机会获得平台重点推荐和额外奖励。新书上架即可参与，优质作品将获得编辑力荐。',
          status: '进行中',
          coverBg: 'linear-gradient(135deg, #e0f0e0 0%, #c0e0c0 100%)'
        },
        {
          title: '玄幻题材创作大赛',
          time: '2025-02-15 至 2025-04-15',
          description: '针对玄幻题材的专项创作大赛，参赛作品有机会获得出版机会和影视改编权益。大赛设金、银、铜奖多个奖项。',
          status: '进行中',
          coverBg: 'linear-gradient(90deg, #fff0e0 0%, #ffe0c0 100%)'
        },
        {
          title: '新人作家培训班',
          time: '2025-03-20 开始',
          description: '为期一个月的新人作家在线培训，知名编辑和畅销书作家分享创作经验和技巧，助力新人作家快速成长。',
          status: '报名中',
          coverBg: 'linear-gradient(90deg, #e8f4ff 0%, #d1e9ff 100%)'
        }
      ],
      characterTips: [
        {
          title: '如何打造立体的小说主角',
          description: '一个好的小说主角应当具备鲜明的性格特点、合理的成长轨迹以及内在的矛盾冲突。本文将分享如何通过细节描写、内心独白和行为塑造来创造令读者难忘的角色形象。'
        },
        {
          title: '配角也精彩：配角人物设计指南',
          description: '配角往往是推动剧情的重要力量，也是丰富小说世界的必要元素。本文将教你如何设计有特色的配角，以及如何处理主角与配角之间的关系，使故事更加丰满。'
        }
      ],
      plotTips: [
        {
          title: '小说情节设计的"三幕结构"',
          description: '三幕结构是经典的故事结构，包括设置、冲突和解决。本文详细讲解如何运用这一结构来组织你的小说情节，创造引人入胜的故事节奏。'
        },
        {
          title: '如何设计出人意料却合情合理的剧情转折',
          description: '好的剧情转折应该既出乎读者意料，又在情理之中。本文分享如何通过前期埋线、角色动机设计和合理的因果关系来创造令读者拍案叫绝的情节转折。'
        }
      ],
      sceneTips: [
        {
          title: '场景描写的"五感法则"',
          description: '通过视觉、听觉、嗅觉、味觉和触觉的全方位描写，让读者仿佛身临其境。本文将通过实例分析，教你如何运用"五感法则"创造生动的场景描写。'
        },
        {
          title: '不同文学体裁的场景描写技巧',
          description: '玄幻、都市、历史、科幻等不同题材的小说，其场景描写各有侧重。本文将分类讨论不同题材下的场景描写特点和技巧，帮助作者在对应题材中创造更具沉浸感的世界。'
        }
      ],
      successStories: [
        {
          author: '风中龙吟',
          works: '《九天神帝》《万古剑尊》《修真界败类》',
          quote: '"从一个默默无闻的写手到畅销书作家，番茄小说平台给了我无限可能。"',
          description: '2022年开始在番茄小说平台连载《九天神帝》，半年内积累粉丝百万，月收入突破十万，作品已签约影视改编。',
          avatarBg: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)'
        },
        {
          author: '月下清风',
          works: '《重生之豪门千金》《总裁的契约新娘》',
          quote: '"番茄小说的数据分析工具帮助我找到了读者真正喜欢的内容。"',
          description: '凭借精准的市场定位和平台强大的数据支持，《重生之豪门千金》单月订阅突破50万，成为平台现象级爆款。',
          avatarBg: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)'
        },
        {
          author: '幻想曲',
          works: '《末日求生指南》《异界生存手册》',
          quote: '"从兼职写作到全职作家，番茄小说让我的创作梦想成为现实。"',
          description: '在番茄小说平台连载两年，作品累计阅读量突破3亿，版权售出，实现了从IT工程师到全职作家的华丽转身。',
          avatarBg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
        }
      ]
    }
  },
  computed: {
    ...mapState(['categories'])
  },
  methods: {
    handleApplyWriter() {
      if (!this.$store.state.isLoggedIn) {
        this.$message.warning('请先登录')
        return
      }
      this.writerApplyDialogVisible = true
    },
    submitWriterApply() {
      // 模拟提交
      setTimeout(() => {
        this.writerApplyDialogVisible = false
        this.$message.success('申请已提交，我们将在3个工作日内进行审核')
      }, 1000)
    },
    navigateTo(route) {
      if (!this.$store.state.isLoggedIn) {
        this.$message.warning('请先登录')
        return
      }
      this.$router.push(route)
    }
  }
}
</script>

<style scoped>
.writer-page {
  padding-top: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.writer-banner {
  height: 300px;
  background: linear-gradient(135deg, #ff9a44 0%, #ff6700 100%);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  box-shadow: 0 4px 12px rgba(255, 154, 68, 0.3);
}

.banner-title {
  font-size: 36px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.banner-desc {
  font-size: 18px;
  opacity: 0.9;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-title {
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.title-icon {
  margin-right: 8px;
  font-size: 20px;
}

.more-link {
  font-size: 14px;
  color: #666;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.more-link:hover {
  color: #ff6700;
}

.more-link i {
  margin-left: 4px;
}

/* 作家中心入口 */
.feature-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #eee;
}

.feature-section:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-color: #ff6700;
}

.feature-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.feature-title i {
  margin-right: 8px;
  color: #ff6700;
}

.feature-desc {
  color: #666;
  font-size: 14px;
}

.feature-arrow i {
  font-size: 20px;
  color: #999;
}

.feature-section:hover .feature-arrow i {
  color: #ff6700;
}

/* 作家福利 */
.benefit-card {
  padding: 24px;
  height: 220px;
  background-color: white;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}

.benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 103, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.benefit-icon i {
  font-size: 28px;
  color: #ff6700;
}

.benefit-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.benefit-desc {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

/* 排行榜和公告 */
.rank-news-container {
  margin-top: 40px;
}

.rank-news-wrapper {
  display: flex;
  gap: 20px;
}

.rank-section {
  flex: 2;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.news-section {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.rank-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.rank-list {
  margin-bottom: 15px;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.rank-item:last-child {
  border-bottom: none;
}

.rank-number {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background-color: #ff6700;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-right: 15px;
}

.writer-avatar {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  margin-right: 15px;
}

.rank-writer-info {
  flex: 1;
}

.rank-writer-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.rank-writer-works {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.rank-writer-achievement {
  font-size: 13px;
  color: #ff6700;
}

.rank-controls {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.rank-control {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ddd;
  margin: 0 4px;
  cursor: pointer;
}

.rank-control.active {
  background-color: #ff6700;
  width: 20px;
  border-radius: 4px;
}

.news-list {
  display: flex;
  flex-direction: column;
}

.news-item {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-item:last-child {
  border-bottom: none;
}

.news-title {
  color: #333;
  font-size: 14px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-date {
  color: #999;
  font-size: 13px;
  margin-left: 8px;
}

.news-arrow {
  color: #999;
  font-size: 12px;
  margin-left: 8px;
}

/* 作家活动 */
.activity-card {
  height: 320px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}

.activity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.activity-cover {
  height: 140px;
  position: relative;
}

.activity-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  background-color: #999;
  color: white;
  border-radius: 12px;
  font-size: 12px;
  z-index: 1;
}

.activity-status.active {
  background-color: #ff6700;
}

.activity-cover-placeholder {
  width: 100%;
  height: 100%;
}

.activity-info {
  padding: 0 15px 15px;
}

.activity-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.activity-time {
  font-size: 13px;
  color: #666;
}

.activity-desc {
  font-size: 14px;
  color: #666;
  height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 创作技巧 */
.tips-content {
  padding: 15px;
}

.tip-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.tip-item:last-child {
  border-bottom: none;
}

.tip-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.tip-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.6;
}

/* 成功故事 */
.story-card {
  height: 100%;
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.story-header {
  display: flex;
  align-items: center;
}

.author-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.author-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.author-works {
  font-size: 14px;
  color: #666;
}

.story-quote {
  font-size: 16px;
  color: #ff6700;
  font-style: italic;
  margin: 15px 0;
  line-height: 1.6;
}

.story-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 公用类 */
.text-center {
  text-align: center;
}

.text-secondary {
  color: #666;
}

.mt-1 {
  margin-top: 4px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 16px;
}

.mt-5 {
  margin-top: 32px;
}

.mb-4 {
  margin-bottom: 24px;
}

.mb-5 {
  margin-bottom: 32px;
}

.ml-3 {
  margin-left: 16px;
}

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}
</style> 